var that;
class Tab {
  constructor(id) {
    that = this;
    // 获取tab的DOM元素
    this.tab = document.querySelector(id);
    // 获取 + 号
    this.add = this.tab.querySelector(".tabadd");
    // 获取ul
    this.ul = this.tab.querySelector(".fisrstnav ul:first-child");
    // 获取section父元素
    this.tabsCon = this.tab.querySelector(".tabscon");
    // 调用初始化方法 绑定点击事件
    this.init();
  }
  // 获取动态添加的元素  更新节点
  updataNode() {
    // 获取li
    this.lis = this.tab.querySelectorAll("li");
    // 获取section
    this.sections = this.tab.querySelectorAll("section");
    // 获取 icon-guanbi 删除
    this.remove = this.tab.querySelectorAll(".icon-guanbi");
    // 获取span
    this.spans = this.tab.querySelectorAll(".fisrstnav li span:first-child");
  }
  init() {
    this.updataNode();
    this.add.onclick = this.addTab;
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab;
      this.remove[i].onclick = this.removeTab;
      this.spans[i].ondblclick = this.editTab;
      this.sections[i].ondblclick = this.editTab;
    }
  }
  // 切换
  toggleTab() {
    // 排他: 干掉所有人 留下自己
    that.clearClass();
    this.className = "liactive";
    that.sections[this.index].className = "conactive";
  }
  /// 清除li\section样式
  clearClass() {
    // this 指向永远取决于调用者
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = "";
      this.sections[i].className = "";
    }
  }
  // 添加
  addTab() {
    // 排他  清除所有li section 样式
    that.clearClass();
    // 创建元素
    var li =
      '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">测试1</section>';
    // 追加到ul里面
    that.ul.insertAdjacentHTML("beforeend", li);
    that.tabsCon.insertAdjacentHTML("beforeend", section);
    // 添加之后 重新获取所有的li 并绑定事件
    that.init();
  }
  // 删除
  removeTab(e) {
    e.stopPropagation();
    var index = this.parentNode.index;
    // 根据索引 删除对应的元素
    that.lis[index].remove();
    that.sections[index].remove();
    that.init(); // s刷新 更新li的最新个数
    // 当删除后 页面还有已选中的tab栏 不触发前一个tab切换事件
    if (document.querySelector(".liactive")) return;
    // 删除当前,让前一个选中
    index--;
    that.lis[index] && that.lis[index].click();
  }
  // 编辑
  editTab() {
    // 获取最开始的内容
    var str = this.innerHTML;
    // 双击禁止文字选中
    window.getSelection
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    // 创建文本框
    this.innerHTML = '<input type="text" />';
    // 将span的内容设置给文本框
    var input = this.children[0];
    input.value = str;
    input.select(); // 手动选中内容
    // 绑定失去焦点事件
    input.onblur = function () {
      // 当失去焦点  获得input的value 设置给span
      this.parentNode.innerHTML = this.value;
    };
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur();
      }
    };
  }
}
new Tab("#tab");
